<template>
  <div>
    <div>{{ name }}</div>
    <ul>
      <li v-for="item in gameList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Game",
  // 在路由的配置项中书写了props配置项并且值为true,则代表当前路由接受的动态参数通过props传递给当前组件
  props: ["id", "name"],
  mounted() {
    console.log(this.$props);
  },
  // this.$route.params可以获取到传来的params
  computed: {
    gameList() {
      switch (this.$route.params.id) {
        case 0:
          return ["英雄联盟", "qq飞车", "df"];
        case 1:
          return ["绝地求生", "csgo", "游戏王"];
        default:
          return [];
      }
    },
  },
};
</script>

<style>
</style>